<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--导入elementUI样式-->
    <link rel="stylesheet" href="element-ui-2.13.0/lib/theme-chalk/index.css">
	<!--导入vue js文件-->
    <script src="js/vue-v2.6.10.js"></script>
	<!--导入elementUI js文件-->
    <script src="element-ui-2.13.0/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!--点击按钮， 显示弹出框 -->
        <!--引用vue中的变量 dialogVisible -->
        <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        <!--
            dialog 在页面中存在，只是处于隐藏状态
            title 标题
            :visible.sync： visible	是否显示 Dialog
                    冒号：v-bind缩写
        -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
        <!--点击取消时，关闭窗口 -->
        <el-button @click="dialogVisible = false">取 消</el-button>
                <!--点击确认时 关闭窗口，真实环境下，应该指向添加或者修改-->
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data:{
            dialogVisible:false   //默认隐藏弹出框
        },
        methods: {
        }
    });
</script>
</html>